<template>
  <ul>
    <!-- <router-link :to="{query:{id:item.content},path:'/newsss'}"
                 v-for="(item, index) in message"
                 :key="index">
      <div class="li"
           @click="getbgc(index)"
           :class="{'active':ind === index}">
        <div class="borderbox"></div>
        <span class="span">{{item.itemName}}&nbsp;&nbsp;&nbsp;{{item.dpName}}&nbsp;&nbsp;&nbsp;</span>
        <span style="color:#6c7580;font-size:0.20rem">{{item.sortDate}}</span>
        <div class="time">{{item.transferTime}}</div>
        <div class="remind">
          <span :class="{cur:item.ifItemTipStatus===1}"
                v-text="item.ifItemTipStatus===1?'预约提醒':'取消预约'"></span>
        </div>
      </div>
    </router-link> -->

    <li class="itemli"
        v-for="(item, index) in message"
        :key="index"
        @click="infoClick(item.ifItemTipStatus,index,$event)"
        :class="{'active':ind === index}">
      <div class="titlebox">
        <div class="borderbox"></div>
        <span class="span">{{item.itemName}}&nbsp;&nbsp;&nbsp;{{item.dpName}}&nbsp;&nbsp;&nbsp;</span>
        <span style="color:#6c7580;font-size:0.20rem">{{item.sortDate}}</span>
        <!-- <div class="time">{{item.transferTime}}</div> -->
        <div class="remind">
          <span :class="{cur:item.ifItemTipStatus===1}"><i class="tipicon"></i>
            <p v-text="item.ifItemTipStatus===1?'预约提醒':'暂无提醒'"
               style="display:inline-block">
            </p>
          </span>
        </div>
      </div>
      <div class="detailinfo">
        <h3>注意事项</h3>
        <p>{{item.itemTip}}</p>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      // healthList: [
      //   {
      //     healthTitle: '你所不知的世界头号精神健康问题',
      //     healthTime: '2019.04.11'
      //   },
      //   {
      //     healthTitle: '你所不知的世界头号精神健康问题',
      //     healthTime: '2019.04.11'
      //   },
      //   {
      //     healthTitle: '你所不知的世界头号精神健康问题',
      //     healthTime: '2019.04.11'
      //   }
      // ],
      ind: '',
      detailshow: false
    }
  },
  computed: {

  },
  methods: {
    getbgc (index) {
      this.ind = index
    },
    infoClick (status, index, e) {
      if (status === 1) {
        if (e.currentTarget.classList.contains('cur')) {
          e.currentTarget.classList.remove('cur')
        } else {
          let elementList = document.getElementsByTagName('li')
          for (let i = 0; i < elementList.length; i++) {
            elementList[i].classList.remove('cur')
          }
          e.currentTarget.classList.add('cur')
        }
      }
    }
  },
  props: ['message']
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/color.styl'
ul
  max-height 9.9rem
  overflow-y auto
  padding-bottom 0.3rem
li
  min-height 0.7rem
  border-radius 0.1rem
  background-color $color-white
  box-shadow 2px 3.464px 12px 0px rgba(127, 135, 143, 0.3)
  margin 0 0.3rem 0.2rem 0.3rem
  position relative
  .titlebox
    padding 0 0.3rem
    line-height 0.7rem
  .borderbox
    float left
    width 0.04rem
    height 0.3rem
    background-color $color-main
    margin 0.2rem 0.2rem 0 0
  .span
    font-size 0.24rem
    color $color-health
  .time
    float right
    font-size 0.2rem
    color $color-health1
  .detailinfo
    padding 0 0.3rem
    background #f0f0f0
    color #999
    font-size 0.18rem
    padding-bottom 0.15rem
    display none
    h3
      color #999
      font-weight normal
      padding 0.2rem 0 0.1rem 0
    p
      line-height 0.35rem
li.cur
  .detailinfo
    display block
.active
  background-color $color-bgc
.remind
  float right
  font-size 0.2rem
  color #bdbdbd
  font-weight bold
.tipicon
  display inline-block
  width 0.16rem
  height 0.2rem
  background url('../../../static/images/tip.png') no-repeat
  background-size 100% 100%
  vertical-align -0.03rem
.cur
  color #27ae9e
  .tipicon
    background url('../../../static/images/tipcur.png') no-repeat
    background-size 100% 100%
</style>
